<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" @close="close">
    <div class="form-box">
      <el-form ref="form" :model="form" :inline="false" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="提示" prop="">
          <span style="color: red;">
            如果只需要复制某一个字段的子级配置到目标字段，必须先配置好目标游戏的字段，然后选择目标字段和来源游戏、来源字段。<br/>
            如果直接复制整个游戏的字段配置到目标游戏，则无需先配置目标游戏的字段。只需选择来源游戏即可。
          </span>
        </el-form-item>
        <el-form-item label="目标游戏" prop="name">
          <span>{{ form.copyToGameName }}</span>
        </el-form-item>
        <el-form-item label="目标字段" prop="copyToParentId">
          <el-select v-model="form.copyToParentId" placeholder="请选择字段" clearable size="small" @change="copyToParentIdChange">
            <el-option v-for="dict in toFields" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源游戏" prop="copyGameId">
          <el-select @change="gameChange" v-model="form.copyGameId" placeholder="请选择游戏" clearable size="small">
            <el-option v-for="dict in gameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源字段" prop="copyId">
          <el-select v-model="form.copyId" placeholder="请选择字段" clearable size="small">
            <el-option v-for="dict in fromFields" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
          </el-select>
        </el-form-item>
        <div class="center">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('form')" :disabled="loading">提交</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import gameListApi from "@/api/gameConfig/gameList"
import gameConfigApi from "../../../api/gameConfig";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      gameList: [],
      fromFields:[],
      toFields:[],


      // 表单参数
      form: {
        copyToGameId: '',
        copyToGameName: '',
        copyGameId: '',
        copyId: '',
        copyToParentId: '',
      },
      title: "快速配置",
      // uploadImgUrl: "",
      rules: {
        copyGameId:[
        { required: true, message: "请选择", trigger: "change" }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    // 打开弹窗
    open(data) {
      // console.log("%c Line:85 🍕 data", "color:#93c0a4", data);
      this.form.copyToGameId = data.id
      this.form.copyToGameName = data.name
      this.dialogVisible = true;
      this.getGameList()
      this.getToFields()
    },
    // 目标字段改变
    copyToParentIdChange(e){
      if(e){
        this.rules.copyId=[
          { required: true, message: "请选择", trigger: "change" }
        ]
      }else{
        delete this.rules.copyId
      }
    },
    // 查询游戏列表
    // 获取列表
    getGameList() {
      gameListApi.getGameList().then(res => {
        if (res.code == 200) {
          this.gameList = res.rows
       
        }
      });
    },
    // 获取目标字段列表
    getToFields(){
      let obj = {
        gameId:this.form.copyToGameId,
        parentId:0
      }
      gameConfigApi.getAttrList(obj).then(res=>{
        // console.log("%c Line:144 🥑 getAttrListres", "color:#f5ce50", res);
        if(res.code==200){
          this.toFields = res.rows
        }
      })
    },
    // 来源游戏改变,查询来源字段
    gameChange(){
      let obj = {
        gameId:this.form.copyGameId,
        parentId:0
      }
      gameConfigApi.getAttrList(obj).then(res=>{
        // console.log("%c Line:144 🥑 getAttrListres", "color:#f5ce50", res);
        if(res.code==200){
          this.fromFields = res.rows
        }
      })
    },
    // 重置
    reset() {
      this.$refs.form.resetFields();
    },

    submitForm(formName) {
      
      this.$refs["" + formName].validate(valid => {
        if (valid) {
          this.loading = true
          gameConfigApi.copyAttr(this.form).then(res => {
            this.loading = false
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.close()
                this.dialogVisible = false;
                this.$parent.getList();
              }
            });
        } else {
          this.$alert("请填写完整！");
        }
      });
    },
    close() {
      this.reset()
      this.dialogVisible = false
    }
  }
};
</script>
<style scoped lang="css">


</style>
